<template>
  <div class="home">
    <!-- 搜索框 -->
    <van-search placeholder="搜索商品,发现更多优选" background="orange" border-radios="20px" id="search" to="search"/>
    <!-- 隐藏跳转 -->
    <a href="/search" class="Jump"></a>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="banner in banners"
        :key="banner.id"
      >
        <img :src="banner.imageUrl" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格布局 -->
    <div id="guid">
      <div class="left" v-if="guid[0]">
        <img :src="guid[0].imageUrl" alt="">
        <div class="title">
          <p>{{ guid[0].title }}</p>
          <span>{{ guid[0].text }}</span>
        </div>
      </div>
      <div class="right" v-if="guid[1]">
        <div class="top">
          <div class="title">
            <p>{{ guid[1].title }}</p>
            <span>{{ guid[1].text }}</span>
          </div>
          <img :src="guid[1].imageUrl" alt="">
        </div>
        <div class="bottom">
          <div class="title">
            <p>{{ guid[2].title }}</p>
            <span>{{ guid[2].text }}</span>
          </div>
          <img :src="guid[2].imageUrl" alt="">
        </div>
      </div>
    </div>
    <!-- 热销排行 -->
    <div id="hot">
      <a href=""></a>
    </div>
    <!-- 下划线 -->
    <van-divider id="bot-line">小编精选，全场特惠 (ง •̀_•́)ง</van-divider>
    <!-- list -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      id="list"
    >
      <div v-for="li in list" :key="li.id" class="iteam">
        <div class="true" v-if="li.price">
          <img :src="li.image" alt=""/>
        </div>
        <div class="flase" v-else>
          <img :src="li.image" alt=""/>
        </div>
        <p class="title">
          {{ li.title }}
        </p>
        <div class="top">
          <p class="price" v-if="li.price">¥{{ li.price }}</p>
          <span class="zhekou" v-if="li.couponValue">{{ li.couponValue }}</span>
        </div>
        <p class="saleNun" v-if="li.saleNum">{{ li.saleNum }}人购买</p>
      </div>
    </van-list>
  </div>
</template>

<script>
/* 轮播 */
import Vue from 'vue'
import { Swipe, SwipeItem, Divider, Search, List } from 'vant'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Divider)
Vue.use(Search)
Vue.use(List)
export default {
  name: 'Home',
  data() {
    return {
      banners: [],
      guid: [],
      list: [],
      loading: false,
      finished: false
    }
  },
  created() { // 获取banenr数据通常是在created这样的钩子函数内部获取
    this.$http.getBanner().then(resData => {
      console.log(resData) // 我们所获取到的数据是二次封装了的,所需要的banner数据藏得很深,需要数据拦截,index.js
      this.banners = resData.banners
      this.guid = resData.gridsV2
      this.list = resData.items.list
    })
  },
  methods: {
    onLoad() {
    }
  }
}
</script>
<style lang="scss" scoped>
  /* 搜索框 */
  #search{
    color: pink;
  }
  /* 轮播 */
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    width: 100%;
    height: 150px;
    img{
      width: 100%;
      height: 150px;
    }
  }
  /* 宫格布局 */
  #guid{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: row;
    .left{
      width: 45%;
      position: relative;
      margin-right: 30px;
      .title{
        position: absolute;
        top: 10px;
        left: 15px;
        p{
          font-size: 20px;
          color: #43240c;
          margin: 0;
        }
        span{
          font-size: 12px;
          color: orange;
        }
      }
      img{
        width: 200px;
        height: 200px;
      }
    }
    .right{
      width: 50%;
      .top{
        width: 100%;
        height: 100px;
        background-color: #fff3f1;
        position: relative;
        border-radius: 20px;
        .title{
          position: absolute;
          left: 0;
          top: 20px;
          p{
            font-weight: 900;
            font-size: 20px;
            color: #43240c;
            margin: 0;
          }
          span{
          font-size: 12px;
          color: orange;
        }
        }
        img{
          width: 45%;
          height: 100px;
          margin-left: 100px;
        }
      }
      .bottom{
        width: 100%;
        height: 100px;
        background-color: #eef9fc;
        position: relative;
        border-radius: 20px;
        img{
          width: 50%;
          height: 100px;
          margin-left: 100px;
        }
        .title{
          position: absolute;
          left: 0;
          top: 20px;
          p{
            font-weight: 900;
            font-size: 20px;
            color: #43240c;
            margin: 0;
          }
          span{
          font-size: 12px;
          color: orange;
        }
        }
      }
    }
  }
  /* 下划线 */
  #bot-line{
    color: orange;
    margin-top: 35px;
  }
  /* 列表 */
  #list{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .iteam{
      width: 176px;
      height: 300px;
      margin-right: 11px;
      margin-top: 11px;
      img{
        width: 185px;
        height: 170px;
        margin: 0 auto;
      }
      .title{
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
        margin-top: 5px;
        color: #877a73;
      }
      .top{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        span{
          display: block;
          border: 1px solid #fa585a;
          text-align: center;
          color: #fa585a;
          font-size: 9px;
          margin-right: 10px;
        }
        p{
          margin-left: 10px;
          font-size: 25px;
          margin: 0;
          color: #fa585a;
        }
      }
      .saleNun{
        text-align: center;
        color: #ccc;
        font-size: 16px;
      }
    }
    .flase{
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  /* 隐藏跳转 */
  .Jump{
    display: block;
    width: 390px;
    height: 40px;
    position: fixed;
    top: 52px;
    z-index: 1;
  }
</style>
